<template>
    <div class="leftTwo">
        <div class="rightTwo-title">
           行政区划
        </div>
        <div class="citys">
            <div class="cityTitle">
                <!-- <div class="sideLine"></div> -->
                <div class="cityWord">地级行政区（4个）</div>
            </div>
            <div class="cityList">
                <div
                    :class = "curent == index ? 'active': 'cityItem'"
                    v-for="(item, index) in cityList"
                    :key="index"
                    @click="handleCityClick(item, index)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="countys">
            <div class="countyTitle">
                <!-- <div class="sideLine"></div> -->
                <div class="countyWord">县级行政区（15个）</div>
            </div>
            <div class="countyList">
                <div
                    :class = "curentcounty == index ? 'active': 'countyItem'"
                    v-for="(item, index) in countyList"
                    :key="index"
                    @click="handleCountyClick(item, index)"
                >
                    <!-- :class="{'countyActive':item.isActive}" -->
                    {{ item.name }}
                </div>
            </div>
        </div>
        <!-- <div>
            
        <div> -->
    </div>
</template>
<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import { onMounted, ref, provide, reactive } from "vue";
import { useStore } from "vuex";
import axios from 'axios'
import { addLayerImage,removeLayerByName} from '@/cesiumPlugin/layer'
export default {
    data(){
        return{
        curent:-1,
        curentcounty:-1,
        currentList:[],
        checkFlag:[false,false,false,false],
        checkFlagCounty:[false,false,false,false,false,false,false,false,false,false,false,false,false,false,false],
        cityList:[
            { name: "海口市", isActive: false },
            { name: "三亚市", isActive: false },
            { name: "三沙市", isActive: false },
            { name: "儋州市", isActive: false },
        ],
        cityCenter:{
            海口市: [110.198418, 20.045805],
            三亚市: [109.511709, 18.252865],
            三沙市: [112.234483, 16.774644],
            儋州市: [109.580812, 19.520948],
            五指山市: [109.516784, 18.774827],
            文昌市: [110.797473, 19.544234],
            琼海市: [110.474524, 19.259112],
            万宁市: [110.392605, 18.793697],
            东方市: [108.651829, 19.095187],
            定安县: [110.358001, 19.681215],
            屯昌县: [110.101667, 19.351662],
            澄迈县: [110.007497, 19.738885],
            临高县: [109.690508, 19.912025],
            洋浦经济开发区:[109.237184253,19.760101258],
            白沙黎族自治县: [109.4429, 19.221641],
            昌江黎族自治县: [109.055783, 19.298139],
            乐东黎族自治县: [109.173384, 18.750063],
            陵水黎族自治县: [110.037553, 18.506045],
            保亭黎族苗族自治县: [109.700373, 18.640156],
            琼中黎族苗族自治县: [109.838389, 19.033369],
        },
        cityDec: {
            海口市: "海口，别称“椰城”，海南省省会，国家“一带一路”战略支点城市，海南自由贸易港核心城市，地处海南岛北部，东邻文昌，西接澄迈，南毗定安，北濒琼州海峡，是海南省政治、经济、科技、文化中心和最大的交通枢纽。<br>海口市包含：秀英、龙华、琼山、美兰等4个区。<br>2020年共发生事故灾难<span>55</span>起，造成<span>53</span>人死亡、<span>54</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>8</span>起，造成<span>7</span>人死亡。",
            三亚市: "三亚市，是海南省地级市，简称崖，古称崖州，别称鹿城，地处海南岛的最南端。三亚东邻陵水县，西接乐东县，北毗保亭县，南临南海。 <br>三亚市包含：海棠区、吉阳区、天涯区、崖州区等4个区。<br>2020年共发生事故灾难<span>14</span>起，造成<span>13</span>人死亡、<span>11</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>16</span>起，造成<span>18</span>人死亡。",
            三沙市: "三沙市，是海南省地级市，地处中国南海中南部，海南省南部，辖西沙群岛、中沙群岛、南沙群岛的岛礁及其海域，陆地面积20多平方公里，总面积200多万平方公里。 <br> 三沙市包含：西沙区、南沙区等2个区。<br>2020年共发生事故灾难<span>1</span>起，造成<span>0</span>人死亡、<span>0</span>人受伤、<span>1</span>人失踪。<br>2020年共发生社会安全事件<span>0</span>起，造成<span>0</span>人死亡。",
            儋州市: "儋州市，是海南省地级市。儋州市地处海南西北部，濒临北部湾，是海南西部的经济、交通、通信和文化中心。<br>儋州市包含：三都街道、那大镇、和庆镇、南丰镇、大成镇、雅星镇、兰洋镇、光村镇、木棠镇、海头镇、峨蔓镇、王五镇、白马井镇、中和镇、排浦镇、东成镇、新州镇等16个镇。<br>2020年共发生事故灾难<span>10</span>起，造成<span>14</span>人死亡、<span>13</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>8</span>起，造成<span>9</span>人死亡。",
            五指山市:"五指山市是海南省直辖县级市，地处海南岛中南部腹地，是海南岛中部地区的中心城市和交通枢纽，也是海南省中部少数民族的聚居地。<br>五指山市包含：通什镇、南圣镇、毛阳镇、番阳镇、水满乡、畅好乡、毛道乡等7个镇。<br>2020年共发生事故灾难<span>4</span>起，造成<span>6</span>人死亡、<span>1</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>4</span>起，造成<span>4</span>人死亡。",
            文昌市: "文昌，海南省下辖市，海南三大历史古邑之一，是中国著名的侨乡，是琼崖革命重要的根据地之一 [3]  ，海南闽南文化发源地，海南文昌航天发射中心所在地，是中国第四座航天之城。<br>文昌市包含：文城镇、重兴镇、蓬莱镇、会文镇、东路镇、潭牛镇、东阁镇、文教镇、东郊镇、龙楼镇、昌洒镇、翁田镇、抱罗镇、冯坡镇、锦山镇、铺前镇、公坡镇等17个镇。<br>2020年共发生事故灾难<span>7</span>起，造成<span>6</span>人死亡、<span>4</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>7</span>起，造成<span>8</span>人死亡。",
            琼海市: "琼海，海南省县级市，位于海南省东部，万泉河中下游<br>琼海市包含：嘉积、中原、博鳌、潭门、长坡、万泉、塔洋、大路、阳江、龙江、会山、石壁等12个镇。<br>2020年共发生事故灾难<span>6</span>起，造成<span>6</span>人死亡、<span>5</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>2</span>起，造成<span>2</span>人死亡。",
            万宁市: "万宁，海南省县级市，位于海南岛东南部，东临南海，西接琼中县，南和陵水县相邻，北和琼海市交界。<br>万宁市包含：万城镇、龙滚镇、和乐镇、后安镇、大茂镇、东澳镇、礼纪镇、长丰镇、山根镇、北大镇、南桥镇、三更罗镇等12个镇。<br>2020年共发生事故灾难<span>9</span>起，造成<span>8</span>人死亡、<span>2</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>3</span>起，造成<span>3</span>人死亡。",
            东方市: "东方市，海南省下辖县级市，位于海南省西南部，北部湾东岸，昌化江下游，南及东南与乐东县接壤，北至东北隔昌化江与昌江黎族自治县交界，西临北部湾，与越南隔海相望，东靠黎母山脉。<br>东方市包含：八所镇、东河镇、大田镇、感城镇、板桥镇、三家镇、四更镇、新龙镇等8个镇。<br>2020年共发生事故灾难<span>24</span>起，造成<span>28</span>人死亡、<span>15</span>人受伤、<span>1</span>人失踪。<br>2020年共发生社会安全事件<span>20</span>起，造成<span>22</span>人死亡。",
            定安县: "定安县，海南省直辖县，位于海南岛的中部偏东北。<br>定安县包含：定城镇、新竹镇、龙湖镇、黄竹镇、雷鸣镇、龙门镇、龙河镇、岭口镇、翰林镇、富文镇等10个镇。<br>2020年共发生事故灾难<span>6</span>起，造成<span>6</span>人死亡、<span>2</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>4</span>起，造成<span>7</span>人死亡。",
            屯昌县: "屯昌县，海南省直辖县，位于海南岛中部偏北,建县时间不长，其前身新民县所辖地，历史上原是琼山、定安、澄迈三县的边区。<br>屯昌县包含：屯城镇、新兴镇、枫木镇、乌坡镇、南吕镇、南坤镇、坡心镇、西昌镇等8个镇。<br>2020年共发生事故灾难<span>9</span>起，造成<span>8</span>人死亡、<span>4</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>3</span>起，造成<span>3</span>人死亡。",
            澄迈县: "澄迈县位于海南岛的西北部，环北部湾城市群的县，毗邻省会海口市,澄迈县先后获得“世界长寿之乡”、“中国绿色名县”、“中国最佳休闲旅游县”、“中国美丽乡村建设示范县”、“十大文化特色旅游名县”、“国家卫生县城” 等。澄迈县包含：金江、瑞溪、永发、老城、加乐、文儒、福山、桥头、中兴、仁兴、大丰等11个镇。<br>屯昌县包含：屯城镇、新兴镇、枫木镇、乌坡镇、南吕镇、南坤镇、坡心镇、西昌镇等8个镇。<br>2020年共发生事故灾难<span>5</span>起，造成<span>5</span>人死亡、<span>2</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>6</span>起，造成<span>6</span>人死亡。",
            临高县: "临高县，是海南省直辖县，地处海南岛西北部，东邻澄迈县，西南与儋州市接壤，西北濒临北部湾，北濒琼州海峡，与雷州半岛隔海相望。<br>临高县包含：东英镇、调楼镇、新盈镇、临城镇、波莲镇、博厚镇、皇桐镇、多文镇、加来镇、南宝镇、和舍镇等11个镇。<br>2020年共发生事故灾难<span>19</span>起，造成<span>15</span>人死亡、<span>14</span>人受伤、<span>2</span>人失踪。<br>2020年共发生社会安全事件<span>6</span>起，造成<span>7</span>人死亡。",
            白沙黎族自治县:
                "白沙黎族自治县，海南省下辖自治县，位于海南岛中西部，东与琼中县为依，东南与五指山市交界，南与乐东县相连，西与昌江县接壤，北与儋州市毗邻。<br>白沙黎族自治县包含：牙叉镇、七坊镇、邦溪镇、打安镇、细水乡、元门乡、南开乡、阜龙乡、青松乡、金波乡、荣邦乡等11个镇。<br>2020年共发生事故灾难<span>3</span>起，造成<span>3</span>人死亡、<span>0</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>0</span>起，造成<span>0</span>人死亡。",
            昌江黎族自治县:
                "昌江黎族自治县是海南省直辖自治县，地处海南岛西部，总面积1569平方千米，下辖7镇1乡。<br>昌江黎族自治县包含：石碌镇、叉河镇、十月田镇、乌烈镇、昌化镇、海尾镇、七叉镇等7个镇。<br>2020年共发生事故灾难<span>12</span>起，造成<span>16</span>人死亡、<span>0</span>人受伤、<span>3</span>人失踪。<br>2020年共发生社会安全事件<span>0</span>起，造成<span>0</span>人死亡。",
            乐东黎族自治县:
                "乐东黎族自治县，是海南省直管自治县，位于海南岛西南部。<br>乐东黎族自治县包含：抱由镇、万冲镇、大安镇、志仲镇、千家镇、九所镇、利国镇、黄流镇、佛罗镇、尖峰镇、莺歌海镇等11个镇。<br>2020年共发生事故灾难<span>11</span>起，造成<span>10</span>人死亡、<span>7</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>5</span>起，造成<span>6</span>人死亡。",
            陵水黎族自治县:
                "陵水黎族自治县位于海南岛的东南部,是个以黎族、汉族、苗族人口居多的“大杂居，小聚居”的市县。<br>陵水黎族自治县包含：椰林镇、新村镇、英州镇、本号镇、隆广镇、三才镇、光坡镇、文罗镇、黎安镇等9个乡镇。<br>2020年共发生事故灾难<span>2</span>起，造成<span>6</span>人死亡、<span>2</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>3</span>起，造成<span>3</span>人死亡。",
            保亭黎族苗族自治县:
                "亭黎族苗族自治县，隶属于海南省，位于海南岛中部五指山南麓。地处海南省南部内陆。<br>保亭黎族苗族自治县包含：保城镇、什玲镇、三道镇、新政镇、响水镇、加茂镇等6个镇。<br>2020年共发生事故灾难<span>5</span>起，造成<span>5</span>人死亡、<span>6</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>0</span>起，造成<span>0</span>人死亡。",
            琼中黎族苗族自治县:
                "琼中黎族苗族自治县是海南省下辖的民族自治县之一，县境地处海南岛中部，五指山北麓，热带海洋季风气候，夏长无酷暑，冬短无严寒。<br>琼中黎族苗族自治县包含：营根镇、湾岭镇、黎母山镇、红毛镇、长征镇、中平镇、和平镇、什运乡、上安乡、吊罗山乡等10个乡镇。<br>2020年共发生事故灾难<span>2</span>起，造成<span>2</span>人死亡、<span>0</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>0</span>起，造成<span>0</span>人死亡。",
            洋浦经济开发区:
                "洋浦经济开发区在海南西北部的洋浦半岛，截至2019年8月，总面积31平方公里，行政地级正厅级，是国务院1992年批准设立的享受保税区政策的国家级开发区。<br>洋浦经济开发区包含：18个社区、9个行政村。<br>2020年共发生事故灾难<span>5</span>起，造成<span>6</span>人死亡、<span>0</span>人受伤、<span>0</span>人失踪。<br>2020年共发生社会安全事件<span>4</span>起，造成<span>4</span>人死亡。",
        },
        countyList:[
            { name: "文昌市", isActive: false },
            { name: "琼海市", isActive: false },
            { name: "万宁市", isActive: false },
            { name: "东方市", isActive: false },
             { name: "琼中黎族苗族自治县", isActive: false },
            { name: "临高县", isActive: false },
            { name: "定安县", isActive: false },
            { name: "保亭黎族苗族自治县", isActive: false },
            { name: "屯昌县", isActive: false },
             { name: "澄迈县", isActive: false },
             { name: "昌江黎族自治县", isActive: false },
            { name: "乐东黎族自治县", isActive: false },
             { name: "白沙黎族自治县", isActive: false },
            { name: "陵水黎族自治县", isActive: false },
            { name: "洋浦经济开发区", isActive: false },
            { name: "五指山市", isActive: false },
        ]
        }
    },
    components: {
        ThemeTitlenew,
    },
    methods:{
        handleCityClick(item, index){
            this.checkFlag[index] = !this.checkFlag[index]
            if(this.checkFlag[index] == true){
                this.curent = index
                this.curentcounty = -1
                this.checkFlag.forEach((ele,eleindex)=>{
                    if(index != eleindex){
                        this.checkFlag[eleindex] = false
                    }
                })
                // var serviceUrl = "http://59.212.37.22/ime-cloud/rest/ADMI_DIVI_A/feature/0/query?where=name="+"'"+item.name+"'";
                //  $.ajax({
                //      url: serviceUrl,
                //      type: 'get',
                //      dataType:'json',
                //      success: function (res) {
                //          if(res.status == "ok"){
                //              console.log(res)
                //              let arr = res.result[0].geometry
                //                if(arr.indexOf("MULTI")>-1){
                //                    let arr1 = arr.replace("MULTIPOLYGON(((", "[[").replace(")))","]]").replace(/\(+/g, "[").replace(/\)+/g, "]").replace(/\s+/g, ",");
                //                    let arr2 = eval( "(" + arr1 + ")" )
                //                    arr2.forEach((item,index) => {
                //                        layerManager.addPloygonLine("woshinidaye"+index,item)
                //                    });
                //                }else{
                //                  //二，针对POLYGON 首位替换，去掉
                //                  let arr1 = arr.replace("POLYGON((", "[").replace("))","]").replace(/\s+/g, ",");
                //                  let arr2 = eval( "(" + arr1 + ")" )
                //                  layerManager.addPloygonLine("woshinidaye",arr2)
                //               }
                //          }
                //      },
                //      error:function (e) {
                //          console.log(e)
                //      }
                //  }); 
                layerManager.removeAll()
                layerManager.addBillboard("descBillboard",this.cityCenter[item.name][0],this.cityCenter[item.name][1],"/data/images/earth/local1.png")
                layerManager.addGeojsonZoom(`./data/geojson/cityOrCounty/${item.name}.json`)
                viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(this.cityCenter[item.name][0],this.cityCenter[item.name][1], 300000),
                },1000);
                setTimeout(()=>{
                    css3Renderer.addEntityLayer({
                        id: 'descDialog',
                        position: [this.cityCenter[item.name][0],this.cityCenter[item.name][1],1000],//高度为 boxHeightMax
                        element: `<div class='ysc-dynamic-layer ys-css3-box' id='descDialog'>
                                        <div class='lineconnect'></div>
                                        <div id='topline' class="line">
                                            <div id="yuan1" class="yuan"></div>
                                            <div id="animation-line1" class="line"></div>
                                        </div>
                                        <div id="leftline" class="line">
                                            <div id="yuan1" class="yuan"></div>        
                                        </div> 
                                        <div id="rightline" class="line">
                                        </div>  
                                        <div id="bottomline" class="line">
                                            <div id="animation-line2" class="line">
                                              <div id="sanjiao"></div>
                                            </div>
                                        </div>
                                        <div id="yuan2" class="yuan yuan2">
                                            <div id="xline1" class="line xx"></div>
                                            <div id="xline2" class="line"></div>
                                            <div id="xline3" class="line xx"></div>
                                            <div id="yuan3" class="yuan yuan2"></div>
                                        </div>              
                                         <div class='main'>
                                            <div class="mainTitle">${item.name}</div>
                                            <div style="color:#dce9b9;line-height:20px;font-size:16px;" v-html>
                                                ${this.cityDec[item.name]}
                                            </div>
                                        </div>
                                    </div>`,
                        offset:[10,-250 ],
                        boxHeight: 1,//中间立方体的高度
                        boxHeightDif: 1,//中间立方体的高度增长差值，越大增长越快
                        boxHeightMax: 1,//中间立方体的最大高度
                        boxSide:1,//立方体的边长
                        boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
                        circleSize: 1,//大圆的大小，小圆的大小默认为一半
                    })
                },2000)
                console.log(this.checkFlag[index])
            }else if(this.checkFlag[index] == false){
            var dialogInfo = document.getElementById("descDialog")
            if(dialogInfo){
                dialogInfo.style.display="none"
            }
            layerManager.removeAll()
            this.curent = -1
            }
        },
        handleCountyClick(item, index){
            this.checkFlagCounty[index] = !this.checkFlagCounty[index]
            if(this.checkFlagCounty[index] == true){
                 this.curentcounty =  index
                   this.curent = -1
                   this.checkFlagCounty.forEach((ele,eleindex)=>{
                       if(index != eleindex){
                           this.checkFlagCounty[eleindex] = false
                       }
                   })
                //  var serviceUrl = "http://59.212.37.22/ime-cloud/rest/ADMI_DIVI_A/feature/0/query?where=name="+"'"+item.name+"'";
                //  $.ajax({
                //      url: serviceUrl,
                //      type: 'get',
                //      dataType:'json',
                //      success: function (res) {
                //          if(res.status == "ok"){
                //              let arr = res.result[0].geometry
                //                if(arr.indexOf("MULTI")>-1){
                //                    let arr1 = arr.replace("MULTIPOLYGON(((", "[[").replace(")))","]]").replace(/\(+/g, "[").replace(/\)+/g, "]").replace(/\s+/g, ",");
                //                    let arr2 = eval( "(" + arr1 + ")" )
                //                    arr2.forEach((item,index) => {
                //                        layerManager.addPloygonLine("woshinidaye"+index,item)
                //                    });
                //                }else{
                //                  //二，针对POLYGON 首位替换，去掉
                //                  let arr1 = arr.replace("POLYGON((", "[").replace("))","]").replace(/\s+/g, ",");
                //                  let arr2 = eval( "(" + arr1 + ")" )
                //                  layerManager.addPloygonLine("woshinidaye",arr2)
                //               }
                //          }
                //      },
                //      error:function (e) {
                //          console.log(e)
                //      }
                //  }); 
                layerManager.removeAll()
                layerManager.addBillboard("descBillboard",this.cityCenter[item.name][0],this.cityCenter[item.name][1],"/data/images/earth/local1.png")
                layerManager.addGeojsonZoom(`./data/geojson/cityOrCounty/${item.name}.json`)
                viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(this.cityCenter[item.name][0],this.cityCenter[item.name][1], 300000),
                },1000);
                setTimeout(()=>{
                    css3Renderer.addEntityLayer({
                        id: 'descDialog',
                        position: [this.cityCenter[item.name][0],this.cityCenter[item.name][1], 1000],//高度为 boxHeightMax
                        element: `<div class='ysc-dynamic-layer ys-css3-box' id='descDialog'>
                                        <div class='lineconnect'></div>
                                        <div id='topline' class="line">
                                            <div id="yuan1" class="yuan"></div>
                                            <div id="animation-line1" class="line"></div>
                                        </div>
                                        <div id="leftline" class="line">
                                            <div id="yuan1" class="yuan"></div>        
                                        </div> 
                                        <div id="rightline" class="line">
                                        </div>  
                                        <div id="bottomline" class="line">
                                            <div id="animation-line2" class="line">
                                              <div id="sanjiao"></div>
                                            </div>
                                        </div>
                                        <div id="yuan2" class="yuan yuan2">
                                            <div id="xline1" class="line xx"></div>
                                            <div id="xline2" class="line"></div>
                                            <div id="xline3" class="line xx"></div>
                                            <div id="yuan3" class="yuan yuan2"></div>
                                        </div>              
                                         <div class='main'>
                                            <div class="mainTitle">${item.name}</div>
                                            <div style="color:#dce9b9;line-height:20px;font-size:16px;" v-html>
                                                ${this.cityDec[item.name]}
                                            </div>
                                        </div>
                                    </div>`,
                        offset:[10,-250 ],
                        boxHeight: 1,//中间立方体的高度
                        boxHeightDif: 1,//中间立方体的高度增长差值，越大增长越快
                        boxHeightMax: 1,//中间立方体的最大高度
                        boxSide:1,//立方体的边长
                        boxMaterial: Cesium.Color.DEEPSKYBLUE.withAlpha(0.5),
                        circleSize: 1,//大圆的大小，小圆的大小默认为一半
                    })
                },2000) 
            }else if(this.checkFlagCounty[index] == false){
                var dialogInfo = document.getElementById("descDialog")
                if(dialogInfo){
                      dialogInfo.style.display="none"
                }
                layerManager.removeAll()
                this.curentcounty = -1
            }      
        }
    },
    mounted(){
    //   axios.get('/zhanglulu/v2.5/eLf7OTYyYX6g0GcC/weather.json?adcode=110100')
    //     .then(res=> {
    //       console.log(res);
    //     })
      }
}
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftTwo{
         .rightTwo-title{
               height: vh(24);
            width: vw(364);
            padding-left:vw1(12);
		line-height: vh(24);
		border-left: 2px solid #00e5fd;
		font-family: 'FZTYSJW';
		font-size: 18px;
		font-weight: 600;
		text-align: left;
		color: #ffffff;
		text-shadow: 0px 4px 4px 0px #000000;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		background-image: -webkit-linear-gradient(bottom, #00eaff, #ffffff);
        // background:Pink;
        margin-bottom:vh(10);
        margin-top:vh(20)
        }
        .citys {
            .cityTitle {
                margin-top: vh(22);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .cityWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .cityList {
                display: flex;
                margin-top: vh(15);
                margin-bottom: vh(10);
                // margin-left: vw(12);
                justify-content: space-between;
                .cityItem {
                    flex-shrink: 0;
                    width: vw(78);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }
                 .active{
                    flex-shrink: 0;
                    width: vw(78);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #1398CF;
                    background: #1398CF; 
                    cursor: pointer;
                }
            }
        }
        
        .countys {
            .countyTitle {
                margin-bottom: vh(15);
                margin-top: vh(24);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .countyWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .countyList {
                display: flex;
                flex-wrap: wrap;
                // margin-left: vw(1);
                justify-content: space-between;
                .countyItem {
                    flex-shrink: 0;
                    min-width: vw(85);
                    margin-bottom: vh(12);
                    // margin-left: vw(10);
                    padding-left: vw(8);
                    padding-right: vw(8);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #0A4D6A;
                    cursor: pointer;
                }

                // .countyItem:hover {
                //     background: #1398CF;
                // }
                .active{
                    flex-shrink: 0;
                    min-width: vw(90);
                    margin-bottom: vh(12);
                    // margin-left: vw(10);
                    padding-left: vw(8);
                    padding-right: vw(8);
                    height: vh(32);
                    line-height: vh(32);
                    text-align: center;
                    font-size: vw(14);
                    background: #022D40;
                    border: 1px solid #1398CF;
                    cursor: pointer;
                    background: #1398CF; 
                }
            }
        }
    }
}
</style>